<template>
	<div class="space-view">
		<!-- 顶部信息模块 -->
		<main>
			<div class="header">
				<div class="header-avatar">
					<a-avatar
						:imageUrl="userDetials.userAvatar"
						:size="150"
						v-if="userDetials.userAvatar"
					></a-avatar>
					<a-avatar :size="150" v-else>{{
						userDetials.username
					}}</a-avatar>
				</div>
				<div class="header-title">
					<h1>{{ userDetials.username }}</h1>
					<p>
						<icon-man v-if="userDetials.userSex == '男'" />
						<icon-woman v-else />{{ userDetials.userSex }}
					</p>
					<p>{{ userDetials.userBio }}</p>
				</div>
			</div>
			<a-tabs animation="true">
				<a-tab-pane key="1">
					<template #title> <icon-clock-circle /> 动态 </template>
					Content of Tab Panel 2
				</a-tab-pane>
				<a-tab-pane key="2">
					<template #title> <icon-star-fill /> 收藏电影 </template>
					<!-- 收藏的电影模块 -->
					<div class="favorite" v-if="favoriteMovies.length > 0">
						<!-- 电影卡片 -->
						<movieCard
							:movieList="favoriteMovies"
							v-if="favoriteNum >= 1"
						></movieCard>
					</div>
					<a-empty v-else>
						<template #image>
							<icon-star-fill />
						</template>
						该用户还未收藏过电影
					</a-empty>
				</a-tab-pane>
				<!-- 最近评论的内容列表 -->
				<a-tab-pane key="3">
					<template #title> <icon-pen /> 最近评论 </template>
					<a-tabs position="left">
						<a-tab-pane
							key="1"
							title="Tab 1"
							:style="{
								overflow: 'hidden'
							}"
						>
							<template #title>
								<icon-video-camera /> 影评
							</template>
							<a-space
								direction="vertical"
								v-if="movieComment.length > 0"
								fill
							>
								<a-card
									v-for="item in movieComment"
									:key="item"
									hoverable
								>
									<template #title>
										{{ item.username }} 于
										{{ item.sendDate }} 评论了
										<a-link
											@click="goDetails(item.movie_id, 1)"
											>{{ item.movie_name }}</a-link
										>
									</template>
									{{ item.context }}
								</a-card>
							</a-space>
							<a-empty v-else>
								<template #image>
									<icon-video-camera />
								</template>
								该用户没评论过电影哦
							</a-empty>
						</a-tab-pane>
						<a-tab-pane
							key="2"
							title="Tab 2"
							:style="{
								overflow: 'hidden'
							}"
						>
							<template #title> <icon-pen /> 文章评论 </template>
							<a-space
								direction="vertical"
								fill
								v-if="articleComment.length >= 1"
							>
								<a-card
									v-for="item in articleComment"
									:key="item"
									hoverable
								>
									<template #title>
										{{ item.username }} 于
										{{ item.sendDate }} 评论了
										<a-link
											@click="
												goDetails(item.article_id, 2)
											"
											>{{ item.article_title }}</a-link
										>
									</template>
									{{ item.context }}
								</a-card>
							</a-space>
							<a-empty v-else>
								<template #image>
									<icon-pen />
								</template>
								该用户没评论过文章哦
							</a-empty>
						</a-tab-pane>
					</a-tabs>
				</a-tab-pane>
			</a-tabs>
		</main>
		<!-- 侧边信息栏 -->
		<aside>
			<div class="aside-header">
				<div class="header-item">
					<p>收藏数</p>
					<p>{{ favoriteNum }}</p>
				</div>
				<div class="header-item">
					<p>评论数</p>
					<p>{{ commentTotal }}</p>
				</div>
			</div>
			<div class="aside-main">
				<div class="main-item">
					<p>收藏电影</p>
					<p>{{ favoriteNum }}</p>
				</div>
				<div class="main-item">
					<p>加入于</p>
					<p>2023-1-17</p>
				</div>
			</div>
		</aside>
	</div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { getUserSpace, getUserComment } from '../../api/users'
import movieApi from '../../api/movie'
const route = useRoute(),
	router = useRouter(),
	userID = ref(route.params.id),
	userDetials = ref({}),
	favoriteMovies = ref([]),
	favoriteNum = ref(0),
	movieComment = ref([]),
	articleComment = ref([]),
	commentTotal = ref(0)
// 获取对应个人空间信息
getUserSpace(userID.value).then(res => {
	userDetials.value = res
	// 获取对应电影的信息
	favoriteNum.value = res.favorites.length
	res.favorites.forEach(y => {
		movieApi.getMovieDetails(y.movie_id).then(res => {
			favoriteMovies.value.push(res)
		})
	})
})
// 获取用户评论历史
getUserComment(userID.value).then(res => {
	// 转换一下时间
	res.find_Comment.forEach((x, index) => {
		res.find_Comment[index].sendDate = movieApi.transformDate(x.sendDate)
	})
	res.find_articleComment.forEach((x, index) => {
		res.find_articleComment[index].sendDate = movieApi.transformDate(
			x.sendDate
		)
	})
	movieComment.value = res.find_Comment
	articleComment.value = res.find_articleComment
	commentTotal.value = movieComment.value.length + articleComment.value.length
})
// 跳转到对应详情页
function goDetails(id, type) {
	const link = {
		1: `/movieDetails/${id}`,
		2: `/newsDetails/${id}`
	}
	router.push(link[type])
}
</script>

<style lang="scss" scoped>
.space-view {
	display: flex;
	width: 1280px;
	min-width: 1280px;
	margin: 0 auto;
	gap: var(--normal-distance);
	& > * + * {
		margin-top: var(--normal-distance);
	}

	:deep(.arco-tabs-content) {
		padding: 1rem 0 1rem 1rem;
	}

	:deep(.arco-tabs-content .arco-tabs-content-item) {
		overflow: visible;
	}

	main {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
		padding: var(--normal-distance);
		background-color: var(--main-2-bg);

		.header {
			display: flex;
			align-items: center;
			gap: var(--normal-distance);
			padding: var(--normal-distance);
			color: var(--fc-bg);
		}
	}

	aside {
		width: 20rem;
		min-width: 20rem;
		max-height: 30rem;
		margin: 0;
		padding: 0 var(--normal-distance);
		color: var(--fc-bg);
		.aside-header {
			display: flex;
			max-height: 4rem;
			padding: var(--normal-distance);
			// border-bottom: 1px solid #ccc;
			background-color: var(--main-2-bg);

			.header-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex: 1;
				min-width: 0;
				cursor: pointer;

				& > p {
					margin: 0;
					font-size: 1rem;
				}

				& > p + p {
					margin-top: var(--normal-sm-distance);
				}
			}

			& > .header-item:nth-child(1) {
				border-right: 1px solid #ccc;
			}
		}

		.aside-main {
			display: flex;
			flex-direction: column;
			font-size: 1rem;

			.main-item {
				display: flex;
				flex: 1;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;
				cursor: pointer;
			}
		}
	}
}
:deep(.arco-tabs-nav-type-line .arco-tabs-tab-title) {
	color: var(--fc-bg);
	&:hover {
		color: rgb(32 108 207);
	}
}
:deep(.arco-card) {
	background: var(--main-bg);
}
:deep(.arco-card-header-title),
:deep(.arco-card-body) {
	color: var(--fc-bg);
}
</style>
